<template>
    <div class="nest">
        <el-form class="search-form" inline size="mini">
            <el-form-item>
                <el-input v-model="search.title" placeholder="id" clearable @change="getList" />
            </el-form-item>
            <el-form-item>
                <el-input v-model="search.title" placeholder="主播名称" clearable @change="getList" />
            </el-form-item>
            <el-form-item>
                <el-select v-model="value" placeholder="主播类型">
                    <el-option label="户外" :value="1" />
                    <el-option label="才艺" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">查询</el-button>
                <el-button icon="el-icon-refresh-left" size="mini" @click="handleResetSearch">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="table">
            <el-table :data="tableData" max-height="850" style="width: 100%; margin-bottom: 20px" v-loading="loading">
                <el-table-column prop="id" label="ID" show-overflow-tooltip> </el-table-column>
                <el-table-column label="头像" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-image
                            :src="scope.row.avatar"
                            :preview-src-list="[scope.row.avatar]"
                            style="width: 100px" />
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="用户名" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="real_name" label="真实姓名" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="alipay_account" label="支付宝账号" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="referee_id" label="上级推荐人" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="created_at" label="注册时间" show-overflow-tooltip> </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="show = true">充值</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="search.page"
                    :page-sizes="[10, 20, 30, 40, 100]"
                    :page-size="search.size"
                    background
                    layout="total, sizes, prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- <el-drawer
            :visible.sync="show"
            :close-on-press-escape="false"
            title="查看内容"
            custom-class="employee-store-drawer"
            modal-append-to-body
            append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="130">
                <el-form-item label="标题：" prop="sort">
                    <el-input v-model="form.sort" type="number" disabled placeholder="" />
                </el-form-item>
                <el-form-item label="类型：" prop="sort">
                    <el-input v-model="form.sort" type="number" disabled placeholder="" />
                </el-form-item>
                <el-form-item label="标签：" prop="sort">
                    <el-input v-model="form.sort" type="number" disabled placeholder="" />
                </el-form-item>
                <el-form-item label="内容：" prop="sort">
                    <el-input v-model="form.sort" type="number" disabled placeholder="" />
                </el-form-item>
            </el-form>
        </el-drawer> -->
        <el-dialog title="作品详情" :visible.sync="show" width="30%">
            <el-table :data="tableRow" border style="width: 100%">
                <el-table-column prop="address" label="是否已上传"> </el-table-column>
                <el-table-column prop="date" label="口令" width="180"> </el-table-column>
                <el-table-column prop="name" label="解锁数" width="180"> </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import addPet from "./addPet.vue";

export default {
    components: { addPet },
    data() {
        return {
            show: false,
            loading: false,
            listItem: {},
            form: {},
            search: {
                title: "", //true	string		名称
                state: "", //true	string		状态 0 全部 1 启用 2 禁用
                nest_id: "", //true	int		猫窝id 全部传 0
                page: 1, //true	int		当前页
                size: 10, //true	int		每页多少条
            },
            tableRow: [
                {address: 1},
                {address: 1}
            ],
            tableData: [{ id: 1 }],
            total: 0,
            petList: [],
        };
    },
    created() {
        this.getCategoryList()
    },
    methods: {
        // 宠窝列表
        async getCategoryList() {
            let res = await this.$request({
                url: "/admin/user.user/index",
                method: "get",
                params: {
                    title: "",
                    page: 1,
                    size: 10,
                },
            });
            // console.log(res);
            if (res.code == 200) {
                this.tableData = res.result.data;
            }
        },
        // 删除宠物
        nestDelete(data) {
            this.$confirm(`确认删除宠物【${data.title}】吗？`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                let res = await this.$request({
                    url: "/admin/pet.list/delete",
                    method: "post",
                    data: { id: data.id },
                });
                if (res.code == 200) {
                    this.$message.success("删除成功");
                    this.getList();
                }
            });
        },
        // 修改宠物状态
        async updataState(data) {
            let res = await this.$request({
                url: "/admin/pet.list/state",
                method: "post",
                data: { id: data.id },
            });
            if (res.code == 200) {
                this.$message.success("操作成功");
            }
        },
        // 宠物列表
        async getList() {
            this.loading = true;
            let res = await this.$request({
                url: "/admin/spot.list/index",
                method: "get",
                params: this.search,
            });
            this.loading = false;
            if (res.code == 200) {
                this.tableData = res.result.data;
                this.total = res.result.total;
            }
        },
        handleResetSearch() {
            this.search = {
                title: "", //true	string		名称
                state: "", //true	string		状态 0 全部 1 启用 2 禁用
                nest_id: "", //true	int		猫窝id 全部传 0
                page: 1, //true	int		当前页
                size: 10, //true	int		每页多少条
            };
        },
        //分页
        handleSizeChange(e) {
            this.search.size = e;
            this.getList();
        },
        handleCurrentChange(e) {
            this.search.page = e;
            this.getList();
        },
    },
};
</script>

<style lang="scss">
.nest {
    width: 100%;
    height: 60px;

    .search-form {
        background: #fff;
        border-radius: 12px;
        padding: 12px 20px;
        margin-bottom: 20px;

        .el-form-item--mini.el-form-item {
            margin-bottom: 0;
        }
    }

    .table {
        padding: 12px 20px;
        background: #fff;
    }
}
</style>
